<template>
  <cfg-menu :title="'配置'" :e="e">
    <div style="display: flex;max-height: 500px;">
      <Menu :theme="'light'" accordion>
        <!-- <div class="flex">
          <Button style="margin-right: 8px" long type="success" @click="save">加载数据</Button>
          <Button long type="success" @click="update">更新</Button>
        </div> -->
        <Submenu v-if="!!editor.data" name="1"
          ><!--为true即为当前选中布局单元-->
          <template slot="title"><Icon type="ios-paper" />布局配置</template>
          <!--在当前布局单元下，添加子单元-->
          <MenuItem class="menuitem-custom" name="添加布局"
            ><Button long type="primary" @click="addLayout">添加布局</Button></MenuItem
          >
          <!--不能删除根单元-->
          <MenuItem v-if="editor.data.pid!==''" class="menuitem-custom" name="删除布局"
            ><Button long type="warning" @click="removeLayout">删除布局</Button></MenuItem
          >
          <!--当前单元只能有一个组件，如果没有才可添加-->
          <MenuItem class="menuitem-custom" name="插入组件" v-if="!editor.elementData">
            <Row>
              <cfg-cell
                style="flex-grow: 1"
                v-model="insertElementName"
                :config="{type:'select',options:webObject.getElementList()}"
              ></cfg-cell>
              <Button type="success" @click="addElement">插入组件</Button>
            </Row>
          </MenuItem>
          <!--删除前组件-->
          <MenuItem v-else class="menuitem-custom" name="删除组件"
            ><Button long type="warning" @click="removeElement">删除组件</Button></MenuItem
          >
          <!--当前单元，当前组件-->
          <MenuItem
            class="menuitem-custom"
            name="当前布局"
            @click.native="editor.show=!editor.show;currentEditor='layout'"
          >
            <Button long>当前布局:{{!!editor.data?editor.data.name:''}}</Button></MenuItem
          >
          <MenuItem
            v-if="!!editor.elementData"
            class="menuitem-custom"
            name="当前组件"
            @click.native="editor.show=true;currentEditor='element'"
          >
            <Button long>当前组件:{{!!editor.elementData?editor.elementData.name:''}}</Button></MenuItem
          >
        </Submenu>
        <Submenu name="2"
          ><!--为true即为当前选中布局单元-->
          <template slot="title"><Icon type="ios-paper" />数据源</template>
          <MenuItem
            class="menuitem-custom"
            name="数据源配置"
            @click.native="sourcePanelShow=true; currentEditor='source'"
            >数据源配置</MenuItem
          >
        </Submenu>
      </Menu>
      <div style="background-color:white;overflow-y: auto;padding:5px 10px;min-width: 400px;">
        <!--布局配置编辑-->
        <template v-if="editor.show&&currentEditor==='layout'">
          <cfg-map :labelSpan="12" :columns="webObject.layoutRowFieldTpl()" :data="editor.data"></cfg-map>
        </template>
        <!--组件配置编辑：cliTable-->
        <template v-else-if="editor.show&&currentEditor==='element'&&editor.elementData.tag==='cliTable'">
          <span style="font-weight: bold">属性：</span>
          <cfg-map
            :labelSpan="12"
            :columns="webObject.cliTableFieldTpl()"
            :data="editor.elementData"
            style="overflow-y: visible"
          ></cfg-map>
          <span style="font-weight: bold">样式：</span>
          <cfg-map
            :labelSpan="12"
            :columns="webObject.cliTableStyleTpl()"
            :data="editor.elementData"
            style="overflow-y: visible"
          ></cfg-map>
          <span style="font-weight: bold">字段：</span>
          <cfg-collapse
            v-for="(item,i) in editor.elementData.config.attr.columns"
            :title="'column'+i"
            :key="'column'+i"
            :removeIcon="i>0?true:false"
            @add="editor.elementData.config.attr.columns.push(webObject.getColumn('cliTable'))"
            @remove="editor.elementData.config.attr.columns.splice(i,1)"
          >
            <cfg-map
              :labelSpan="12"
              :columns="webObject.cliTableColumnFieldTpl()"
              :data="item"
              style="width:100%"
            ></cfg-map>
          </cfg-collapse>
          <cfg-collapse
            v-for="(item,i) in editor.elementData.config.attr.parentColumns"
            :title="'parentColumns'+i"
            :key="'parentColumns'+i"
            :removeIcon="i>0?true:false"
            @add="editor.elementData.config.attr.parentColumns.push(webObject.getParentColumn('cliTable'))"
            @remove="editor.elementData.config.attr.parentColumns.splice(i,1)"
          >
            <cfg-map
              :labelSpan="12"
              :columns="webObject.cliTableParentColumnFieldTpl(editor.elementData.id)"
              :data="item"
              style="width:100%"
            ></cfg-map>
          </cfg-collapse>
        </template>
        <!--组件配置编辑：span-->
        <template v-else-if="editor.show&&currentEditor==='element'&&editor.elementData.tag==='span'">
          <cfg-map :labelSpan="12" :columns="webObject.spanFieldTpl()" :data="editor.elementData"></cfg-map>
        </template>
        <!--组件配置编辑：cliForm-->
        <template v-else-if="editor.show&&currentEditor==='element'&&editor.elementData.tag==='cliForm'">
          <span style="font-weight: bold">属性：</span>
          <cfg-map
            :labelSpan="12"
            :columns="webObject.cliFormFieldTpl()"
            :data="editor.elementData"
            style="overflow-y: visible"
          ></cfg-map>
          <span style="font-weight: bold">样式：</span>
          <cfg-map
            :labelSpan="12"
            :columns="webObject.cliFormStyleTpl()"
            :data="editor.elementData"
            style="overflow-y: visible"
          ></cfg-map>
          <span style="font-weight: bold">字段：</span>
          <cfg-collapse
            v-for="(item,i) in editor.elementData.config.attr.columns"
            :title="'column'+i"
            :key="'column'+i"
            :removeIcon="i>0?true:false"
            @add="editor.elementData.config.attr.columns.push(webObject.getColumn('cliForm'))"
            @remove="editor.elementData.config.attr.columns.splice(i,1)"
          >
            <cfg-map
              :labelSpan="12"
              :columns="webObject.cliFormColumnFieldTpl()"
              :data="item"
              style="width:100%"
            ></cfg-map>
          </cfg-collapse>
        </template>
        <template v-else-if="sourcePanelShow&&currentEditor==='source'">
          <cfg-collapse
            v-for="(item,i) in webObject.record.source"
            :title="'source'+i"
            :key="'source'+i"
            :removeIcon="i>0?true:false"
            @add="webObject.record.source.push(tools.lodash.cloneDeep(webObject.record.source[0]))"
            @remove="webObject.record.source.splice(i,1)"
          >
            <cfg-map :labelSpan="12" :columns="webObject.sourceFieldTpl()" :data="item" style="width:100%"></cfg-map>
          </cfg-collapse>
        </template>
      </div>
    </div>
  </cfg-menu>
</template>

<script>
import CfgMenu from "./basic/cfg-menu";
import CfgMap from "./basic/cfg-map";
import CfgCell from "./basic/cfg-cell";
import CfgCollapse from "./basic/cfg-collapse";
export default {
  name: "cfg-template-current-config",
  components: {CfgCollapse, CfgCell, CfgMap, CfgMenu},// style="width:400px;height:500px;overflow-y: auto"
  data(){
    return {
      insertElementName:'',
      currentEditor:'',
      sourcePanelShow:false,
      editor:{
        dom:null,
        data:null,
        elementDom:null,
        elementData:null,
        leaf:false,
        index:-1,
        show:false,
      },
      layoutList:[],
      elementEditor:{
        index:-1,
        show:false,
      },
      sourceEditor:{
        index:-1,
        show:false,
      },
      elementList:[],
      current:null

    }
  },
  props:{
    e:{
      default:()=>{
        return null
      }
    },
    webObject:{
      default:()=>{
        return null
      }
    },
  },
  computed:{

  },
  watch:{
    "e":function(){
      if(!!this.e){
        let dom=this.tools.dom.matchAttrFirst(this.tools.dom.getPath(this.e),'elementType','layout');
        this.initialLayout(dom);
      }
    }
  },
  methods:{
    initialLayout(dom){
      this.emptyEditor();
      let hierObject=this.tools.hierData.create(this.webObject.record.layout);
      let node=hierObject.findNode(dom.id)
      this.$set(this.editor,'dom',dom);
      this.$set(this.editor,'data',node);
      this.$set(this.editor,'leaf',hierObject.isLeaf(dom.id));
      this.tools.dom.setStyles(this.editor.dom,{
        boxShadow: '0 1px 6px rgba(0, 0, 0,0.5)',
        outline: '1px solid red',
      })
      if(this.editor.leaf){
        let ele=this.webObject.record.elements.find(item=>item.address===node.id);
        if(!!ele){
          let dom=this.tools.dom.getDom(ele.id);
          this.$set(this.editor,'elementData',ele);
          this.$set(this.editor,'elementDom',dom);
          this.tools.dom.setStyles(this.editor.elementDom,{
            boxShadow: '0 1px 6px rgba(0, 0, 0,0.5)',
            outline: '1px solid green',
          })
        }
      }
    },
    emptyEditor(){
      if(!!this.editor.dom){
        this.tools.dom.setStyles(this.editor.dom,{
          boxShadow: 'none',
          outline: 'none',
        })
      }
      if(!!this.editor.elementDom){
        this.tools.dom.setStyles(this.editor.elementDom,{
          boxShadow: 'none',
          outline: 'none',
        })
      }
      this.$set(this.editor,'dom',null);
      this.$set(this.editor,'data',null);
      this.$set(this.editor,'leaf',false);
      this.$set(this.editor,'elementData',null);
      this.$set(this.editor,'elementDom',null);
      this.$set(this.editor,'show',false);
    },
    addLayout(){
      let item=this.webObject.addLayoutNode(this.editor.data.id);
      this.$nextTick(()=>{
        let dom=this.tools.dom.getDom(item.id);
        this.initialLayout(dom);
      })
    },
    removeLayout(){
      let hierObject=this.tools.hierData.create(this.webObject.record.layout);
      let parent=hierObject.findParentNode(this.editor.data.id);
      this.webObject.deleteLayoutNode(this.editor.data.id);
      if(!!this.editor.elementData){
        this.webObject.removeElement(this.editor.elementData.id);
      }
      this.$nextTick(()=>{
        let dom=this.tools.dom.getDom(parent.id);
        this.initialLayout(dom);
      })
    },
    addElement(){
      if(this.insertElementName===''||this.insertElementName===null||this.insertElementName===undefined) return;
      this.webObject.addElement(this.editor.data.id,this.insertElementName);
      this.initialLayout(this.editor.dom)
    },
    removeElement(){
      this.webObject.removeElement(this.editor.elementData.id);
      this.initialLayout(this.editor.dom);
    },
    save(){
      this.webObject.loadData();
    },
    update(){
      this.webObject.updateData();
    }
  }
}
</script>

<style scoped>
.menuitem-custom {
  padding-top: 5px;
  padding-bottom: 5px;
}
</style>
